<template>
  <div class="base_editor">

    <header class="header">文章编辑页</header>
    <Row>
      <Col span="2">*
      </Col>
      <Col span="20">
      <div style="background-color:black;">
        <Divider />
      </div>
      </Col>
      <Col span="2">*
      </Col>
    </Row>

    <Row>
      <Col span="5">
      <div style="font-size: 20px;">文章标题</div>
      </Col>
      <Col span="19"><Input v-model="Aname"
             placeholder="请输入文章标题"
             style="width: 100%; height: 50px;" /></Col>

    </Row>

    <Row>
      <Col span="5">
      <div style="font-size: 20px;">文章类型</div>
      </Col>

      <Col span="3">
      <Select v-model="typeValue"
              style="width:200px">
        <!-- <Select v-model="typeValue"
              style="width:200px"
              placement="top"> -->
        <Option v-for="item in fileTypeList"
                :value="item.value"
                :key="item.value">{{ item.label }}</Option>
      </Select>
      </Col>
    
      <Col span="7">
      <div class = "l1">文章背景图（选填）</div>
      </Col>
      <Col span="9">
      <upload-picture @getBase64="getimage"
                      ref="uploadPic" class = "photo"></upload-picture>
      </Col>
    </Row>

    <Row>
      <Col span="5">
      <div style="font-size: 20px;">文章简介</div>
      </Col>
      <Col span="19">
      <Input v-model="intro"
             type="textarea"
             :rows="4"
             placeholder="请输入文章简介" />
      </Col>
    </Row>

    <Row style="margin-top: 50px">
      <Col span="5">
      <div style="font-size: 20px;">文章内容</div>
      </Col>
    </Row>

    <Row>
      <Col span="24">
      <div ref="editor"
           style="text-align:left"></div>
      </Col>
    </Row>

    <Button v-on:click="getContent"
            type="primary"
            style="font-size: 20px;">发布文章</Button>
    <Button @click="editorClean"
            type="primary"
            style="font-size: 20px;">清空内容</Button>
    <!--     <Button @click="addContent"
            type="primary"
            style="font-size: 20px;">追加内容</Button> -->

  </div>
</template>

<script>
import UploadPicture from "@/components/UploadPicture";
import E from "wangeditor";
import qs from "qs";
export default {
  // name: "editor",
  components: {
    UploadPicture
  },
  data() {
    return {
      editor: {},
      Aname: "",
      intro: "",
      id: "0",
      imageBase64: "",
      editorContent: "",
      editorHtmlContent: "",
      fileTypeList: [
        {
          value: "1",
          label: "推荐"
        },
        {
          value: "2",
          label: "南京"
        },
        {
          value: "3",
          label: "国际"
        },
        {
          value: "4",
          label: "科技"
        },
        {
          value: "5",
          label: "历史"
        },
        {
          value: "6",
          label: "健康"
        },
        {
          value: "7",
          label: "房产"
        },
        {
          value: "8",
          label: "育儿"
        }
      ],
      typeValue: ""
    };
  },
  methods: {
    addContent: function(id) {
      let url = "/filter";
      this.$axios({
        method: "post",
        url: url,
        headers: {
          "Content-type": "application/x-www-form-urlencoded"
        },
        params: {
          id: this.$store.state.dialog.id
        }
      })
        .then(response => {
          let obj = response.data.list[0];
          this.id = obj.id;
          this.editor.txt.append(obj.txt_html);
          this.Aname = obj.name;
          this.intro = obj.intro;
          this.typeValue = obj.type;
          this.$refs.uploadPic.setPic(obj.image);
        })
        .catch(error => {
          console.log(error);
        });
    },
    getimage: function(base64) {
      this.imageBase64 = base64;
    },
    getContent: function() {
      if (this.typeValue == "2") {
        this.editorContent = this.intro;
      }
      this.editorHtmlContent = this.editor.txt.html();
      if (this.Aname != "" && this.editorHtmlContent != "") {
        if (this.typeValue != "") {
          this.sendText();
        } else {
          this.$Message.error("必须选择文章类型");
        }
      } else {
        this.$Message.error("必须填写内容");
      }
    },
    sendText: function() {
      let url = "/insert";
      this.$axios
        .post(
          url,
          {
            name: this.Aname,
            intro: this.intro,
            txt: this.editorContent,
            type: this.typeValue,
            image: this.imageBase64,
            html: this.editorHtmlContent,
            id: this.id,
            academy: "软件学院",
            author: "admin",
          },
          {
            headers: {
              "Content-Type": " application/json"
            }
          }
        )
        .then(response => {
          console.log(response);
          this.$Message.success("文章发布成功");
          this.editorClean();
        })
        .catch(error => {
          console.log(error);
        });
    },

    editorClean: function() {
      this.$store.state.dialog.id = "";
      this.Aname = "";
      this.intro = "";
      this.editor.txt.html("<p></p>");
      this.typeValue = "";
      this.$refs.uploadPic.clean();
    }
  },
  mounted() {
    var editor = new E(this.$refs.editor);
    // 通过 url 参数配置 debug 模式。url 中带有 wangeditor_debug_mode=1 才会开启 debug 模式
    editor.customConfig.debug = location.href.indexOf('wangeditor_debug_mode=1') > 0
    // 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
    editor.customConfig.uploadImgShowBase64 = true; // 使用 base64 保存图片
    // editor.customConfig.uploadImgServer =
    //   "http://localhost:8080/FileUploadAndDownLoad/servlet/UploadHandleServlet"; // 上传图片到服务器
    editor.customConfig.uploadImgHeaders = {
      Accept: "text/x-json"
    };
    editor.customConfig.onchange = text => {
      //var jsonStr = JSON.stringify(editor.txt.text());
      this.editorHtmlContent = editor.txt.html();
    };
    editor.create();
    this.editor = editor;

    if(this.$store.state.dialog.id!="")
    {
      this.addContent()
      console.log("所选文章的id:   "+this.$store.state.dialog.id)
    }
  }
};
</script>

<style scoped>
* {
}
.base_editor {
  width: 100%;
  background-color: rgba(224, 222, 170, 0.5);
  margin-bottom: 80px;
}
.header {
  font-size: 50px;
  color: #464c5b;
}
.l1{
  font-size:20px;
  text-align:right;
  padding-left: 20%;
}
.photo{
  padding-right: 80%;
}
</style>
